<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>幸福家园后台管理</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/sidebar-menu.css">
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/highlight.min.css"/>
    <link rel="stylesheet" href="css/pagination.css"/>
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<header class="index_header">
    <img src="img/header_02.jpg" alt=""/>
</header>
<section class="index_content">
    <aside class="main-sidebar">
        <section  class="sidebar">
            <ul class="sidebar-menu">
                <li class="header">管理菜单</li>
                <li class="treeview ">
                    <a href="index2.html">
                        <i class="fa fa-dashboard"></i> <span>首页</span>
                    </a>
                    <!--<ul class="treeview-menu">-->
                    <!--<li><a href="JavaScript:;"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>-->
                    <!--<li><a href="JavaScript:;"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>-->
                    <!--</ul>-->
                </li>
                <li class="treeview">
                    <a href="javascript:;">
                        <i class="fa fa-files-o"></i>
                        <span>系统管理</span>
                        <!--<span class="label label-primary pull-right">4</span>-->
                        <i class="fa fa-angle-left pull-right"></i>
                    </a>
                    <ul class="treeview-menu" style="display: none;">
                        <!--<li><a href="JavaScript:;"><i class="fa fa-circle-o"></i>新增用户</a></li>-->
                        <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i>修改密码</a></li>-->
                        <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i>上传资料</a></li>-->
                        <!--<li class=""><a href="javascript:;"><i class="fa fa-circle-o"></i>内容上传</a>-->
                        <!--</li>-->
                    </ul>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="fa fa-th"></i> <span>店铺管理</span>
                        <i class="fa fa-angle-left pull-right"></i>
                    </a>
                </li>
                <li class="treeview">
                    <a href="javascript:;">
                        <i class="fa fa-pie-chart"></i>
                        <span>商品管理</span>
                        <i class="fa fa-angle-left pull-right"></i>
                    </a>
                    <ul class="treeview-menu">
                        <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i> 商品选择</a></li>-->
                        <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i> 商品资料上传</a></li>-->
                        <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i> 商品价格</a></li>-->
                        <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i> 商品下架</a></li>-->
                    </ul>
                </li>
                <li class="treeview">
                    <a href="javascript:;">
                        <i class="fa fa-laptop"></i>
                        <span>会员管理</span>
                        <i class="fa fa-angle-left pull-right"></i>
                    </a>
                    <ul class="treeview-menu">
                        <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i> 新增会员</a></li>-->
                        <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i> 会员信息</a></li>-->
                        <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i> 编辑会员</a></li>-->
                        <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i> 会员积分</a></li>-->
                        <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i> 会员消费</a></li>-->
                        <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i> 所有会员</a></li>-->
                    </ul>
                </li>
                <li class="treeview active">
                    <a href="javascript:;">
                        <i class="fa fa-edit"></i> <span>订单管理</span>
                        <i class="fa fa-angle-left pull-right"></i>
                    </a>
                    <ul class="treeview-menu" style="display: block">
                        <li><a href="orderManagement.html"><i class="fa fa-circle-o"></i> 订单列表</a></li>
                    </ul>
                </li>
                <!--<li class="treeview">-->
                <!--<a href="javascript:;">-->
                <!--<i class="fa fa-table"></i> <span>Tables</span>-->
                <!--<i class="fa fa-angle-left pull-right"></i>-->
                <!--</a>-->
                <!--<ul class="treeview-menu">-->
                <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i> Simple tables</a></li>-->
                <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i> Data tables</a></li>-->
                <!--</ul>-->
                <!--</li>-->
                <!--<li>-->
                <!--<a href="javascript:;">-->
                <!--<i class="fa fa-calendar"></i> <span>Calendar</span>-->
                <!--<small class="label pull-right label-danger">3</small>-->
                <!--</a>-->
                <!--</li>-->
                <!--<li>-->
                <!--<a href="javascript:;">-->
                <!--<i class="fa fa-envelope"></i> <span>Mailbox</span>-->
                <!--<small class="label pull-right label-warning">12</small>-->
                <!--</a>-->
                <!--</li>-->
                <!--<li class="treeview">-->
                <!--<a href="javascript:;">-->
                <!--<i class="fa fa-folder"></i> <span>Examples</span>-->
                <!--<i class="fa fa-angle-left pull-right"></i>-->
                <!--</a>-->
                <!--<ul class="treeview-menu">-->
                <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i> Invoice</a></li>-->
                <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i> Profile</a></li>-->
                <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i> Login</a></li>-->
                <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i> Register</a></li>-->
                <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i> Lockscreen</a></li>-->
                <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i> 404 Error</a></li>-->
                <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i> 500 Error</a></li>-->
                <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i> Blank Page</a></li>-->
                <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i> Pace Page</a></li>-->
                <!--</ul>-->
                <!--</li>-->
                <!--<li class="treeview">-->
                <!--<a href="javascript:;">-->
                <!--<i class="fa fa-share"></i> <span>Multilevel</span>-->
                <!--<i class="fa fa-angle-left pull-right"></i>-->
                <!--</a>-->
                <!--<ul class="treeview-menu">-->
                <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i> Level One</a></li>-->
                <!--<li>-->
                <!--<a href="javascript:;"><i class="fa fa-circle-o"></i> Level One <i class="fa fa-angle-left pull-right"></i></a>-->
                <!--<ul class="treeview-menu">-->
                <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i> Level Two</a></li>-->
                <!--<li>-->
                <!--<a href="javascript:;"><i class="fa fa-circle-o"></i> Level Two <i class="fa fa-angle-left pull-right"></i></a>-->
                <!--<ul class="treeview-menu">-->
                <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i> Level Three</a></li>-->
                <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i> Level Three</a></li>-->
                <!--</ul>-->
                <!--</li>-->
                <!--</ul>-->
                <!--</li>-->
                <!--<li><a href="javascript:;"><i class="fa fa-circle-o"></i> Level One</a></li>-->
                <!--</ul>-->
                <!--</li>-->
                <!--<li><a href="javascript:;"><i class="fa fa-book"></i> <span>Documentation</span></a></li>-->
                <!--<li class="header">LABELS</li>-->
                <!--<li><a href="javascript:;"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>-->
                <!--<li><a href="javascript:;"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>-->
                <!--<li><a href="javascript:;"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>-->
            </ul>
        </section>
    </aside>
    <main>
        <div class="main_img">
            <img src="img/2018-06-22.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2018-06-17.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2018-06-10.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2018-05-10.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2018-05-04.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2018-04-26.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2018-04-18.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2018-04-11.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2018-04-01.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2018-03-27.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2018-03-13.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2018-03-02.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2018-02-21.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2018-02-03.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2018-01-22.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2018-01-15.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2018-01-05.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2017-12-29.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2017-12-17.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2017-12-05.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2017-12-03.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2017-11-19.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2017-11-02.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2017-11-01.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2017-10-26.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2017-10-13.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2017-10-10.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2017-09-13.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2017-09-10.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2017-09-01.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2017-08-26.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2017-08-22.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2017-08-18.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2017-08-02.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2017-07-21.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2017-07-17.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2017-07-15.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2017-07-03.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2017-07-02.png" alt=""/>
        </div>
        <div class="main_img" style="display: none">
            <img src="img/2017-07-01.png" alt=""/>
        </div>

        <div class="m-style M-box1"></div>
    </main>
</section>
</body>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="./js/sidebar-menu.js"></script>
<script src="js/highlight.min.js"></script>
<script src="js/jquery.pagination.js"></script>

<script>
    $(function(){

        $.sidebarMenu($('.sidebar-menu'))

        $('.M-box1').pagination({
            coping: true,
            pageCount:40,
            callback: function (api) {
                var page = api.getCurrent()
                console.log(page);
                img_show(page)
            }
        });

        function img_show(index){
            $('.main_img').css('display','none')
            $('.main_img').eq(index-1).css('display','block')

        }
    })
</script>
</html>